<script setup lang="ts">
import { ref, reactive, onUnmounted, computed } from 'vue'
import { showToast } from 'vant'
// 下面的代码里面，有export* 整体导出，这里就不需要写  ../../stores/moduels/user.ts
import { useUserStore } from '../../stores'
import { loginRequest, getCodeRequest, loginByCodeRequest } from '../../services/user'
import router from '../../router'

const useUser = useUserStore()
const formData = reactive({
  password: '',
  mobile: '',
  code: ''
})
const formRef = ref(null)
const agree = ref(false)
// 这个变量是控制我们是否显示密码登录还是 验证码登录
const isPassword = ref(true)
// 显示隐藏密码的变量 ----  有是否逻辑的变量，一般都加 is
const isShow = ref(false)

// 下面写个计算属性，代替发送验证码的时候的校验
// 当前是否是有效的手机号
const isValidMobile = computed((): boolean => {
  // 先写假的条件， 尽量的在if里面使用reutrn 不要else
  if (!formData.mobile) return false

  if (!/^1[3-9]\d{9}$/.test(formData.mobile)) return false

  return true
})

// 倒计时的时间
const time = ref(0)
// 定期器的id，后面用来销毁定时器
let timerId
// 定义一个节流阀
let flag = true

const sendCode = async () => {
  // clearInterval(timerId)
  // console.log(111)

  // if (time.value > 0) return

  // console.log(2222)
  if (flag) {
    flag = false

    try {
      await getCodeRequest({
        mobile: formData.mobile,
        type: 'login'
      })

      // 自己把这个逻辑想清楚， 下面这句话为什么要放下面去， 因为一点击按钮，就发请求，只有上面请求
      // 成功了，才会执行45行的代码，页面上的按钮才不能点击，倒计时才会开始(能不能点击取决于time.value 和 0的比较)。 如果请求成功走下面代码，如果请求失败直接走catch， 将节流阀修改为true，不然用户点击按钮，就在进不来这个if分支了
      time.value = 10

      // setInterval 即使切换了组件，组件销毁了，他还会继续
      // setInterval 有个默认的导入库 'timer/promise' 我们应该使用window.setInterval
      // 如果发现自己正常写的代码有问题，就看看是不是 在script顶部 帮我们自动导入了timer/promise这个库
      timerId = setInterval(() => {
        time.value--
        console.log(time.value)

        if (time.value === 0) {
          flag = true
        }

        // time到了0 要清空定时器
        if (time.value <= 0) clearInterval(timerId)
      }, 1000)
    } catch (_) {
      flag = true
    }
  }
}
// 销毁定时器
// vue的优化， js里面的原生的一些时间， document.addEvenetLsister()  setInterval
// 这些事件在vue组件销毁以后，vue2 beforeDesoter destroy  vue3  unmounted 要手动调用清除事件，和定时器的一些方法。防止组件性能受到影响
onUnmounted(() => {
  clearInterval(timerId)
})

const mobileRules = [
  { required: true, message: '请填写手机号' },
  { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
]
const passwordRules = [
  { required: true, message: '请填写密码' },
  // s S w W d D
  { pattern: /^\S{8,12}$/, message: '手机号格式错误' }
]
const codeRules = [
  { required: true, message: '请填写验证码' },
  // s S w W d D
  { pattern: /^\d{6}$/, message: '请输入6位验证码' }
]

const onSubmit = async () => {
  // 先写假值，在if里面return
  if (!agree.value) {
    showToast('请同意用户协议')
    return
  }
  let res: any

  // 因为密码登录和验证码登录 公用同一个按钮，所以通过变量 isPassword 来区别，发请求的时候也区分一下
  if (isPassword.value) {
    res = await loginRequest({
      mobile: formData.mobile,
      password: formData.password
    })
  } else {
    res = await loginByCodeRequest({
      mobile: formData.mobile,
      code: formData.code
    })
  }

  // 将这个数据，保存到全局数据仓库（vue2--vuex。 vue3-pinia）
  useUser.setUser(res.data)

  // const res = await axios<myUserInfo, {code: number, message:string, data: myUserInfo}>({
  //   url: 'https://consult-api.itheima.net/login/password',
  //   method: 'POST',
  //   data: formData
  // })
  // console.log(res)
}
const failed = () => {
  console.log('校验失败')
}
const test = () => {
  router.push('/')
  // van-form上面的方法， 是通过表单实例 ref来访问
  // formRef.value
  //   .validate('mobile')
  //   .then((res) => {
  //     console.log(res)
  //   })
  //   .catch((err) => {
  //     console.log(err)
  //   })
  // vue3 没有this.$router.push
}

const clickLeft = () => {
  if (history.state?.back) {
    // history 是浏览器原生的 历史对象
    history.back()
  } else {
    // route 是vue-router路由的方法
    router.push('/')
  }
}

const clickRight = () => {
  console.log('父组件监听的事件')
}
</script>

<template>
  <div class="login-page">
    <cp-nav-bar title="登录332" rightText="注册6" @click-left="clickLeft" @click-right="clickRight"></cp-nav-bar>
    <div class="login-page-main">
      <div class="lp-title">
        <span>{{ isPassword ? '密码登录' : '手机验证码登录' }}</span>
        <span @click="isPassword = !isPassword">{{ isPassword ? '手机验证码登录' : '密码登录' }} &gt;</span>
      </div>
      <div class="lp-form">
        <van-form ref="formRef" @submit="onSubmit" @failed="failed">
          <van-cell-group inset>
            <!-- 通过 pattern 进行正则校验 -->
            <van-field v-model="formData.mobile" name="mobile" placeholder="请输入手机号" :rules="mobileRules" />
            <van-field
              v-if="isPassword"
              :type="isShow ? 'text' : 'password'"
              v-model="formData.password"
              name="password"
              placeholder="请输入密码"
              right-icon="warning-o"
              :rules="passwordRules"
            >
              <template v-slot:right-icon>
                <cp-icon @click="isShow = !isShow" :name="isShow ? 'login-eye-on' : 'login-eye-off'"></cp-icon>
              </template>
              <template #label>
                <van-icon name="like" />
              </template>
            </van-field>
            <van-field
              v-else
              center
              clearable
              v-model="formData.code"
              name="code"
              placeholder="请输入验证码"
              :rules="codeRules"
            >
              <template #button>
                <van-button size="small" type="primary" :disabled="time > 0 || !isValidMobile" @click="sendCode">
                  {{ time > 0 ? `${time}s以后可以再次点击` : '发送验证码' }}</van-button
                >
                <!-- <van-button size="small" type="primary" @click="sendCode">
                  {{ time > 0 ? time : '发送验证码' }}</van-button
                > -->
              </template>
            </van-field>

            <!-- <van-checkbox v-model="checked">复选框</van-checkbox> -->
            <van-field name="checkbox">
              <template #input>
                <van-checkbox v-model="agree" />
                <span style="margin-left: 5px">我已同意</span>
                <a class="lpf-xieyi" href="http://www.baidu.com">用户协议</a>
                <span>及</span>
                <a class="lpf-xieyi" href="http://www.baidu.com">隐私协议</a>
              </template>
            </van-field>
          </van-cell-group>

          <div style="margin: 16px 0">
            <van-button round block type="primary" native-type="submit"> 提交 </van-button>
          </div>
        </van-form>
      </div>
      <div class="lp-forget" @click="test">忘记密码</div>
      <div class="lp-icon">
        <div>第三方登录</div>
        <CpIcon name="home-docs"></CpIcon>
        <!-- <CpIcon name="home-find"></CpIcon> -->
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-page {
  // width: calc(100% - 30px);
  width: 100%;
  height: 100vh;
  // 盒子模型 border-box -- 更margin没关系
  // border-box： width = 内容的宽度 + 左右的padding + 左右的border。 如果有poadding和 border，那么widht的内容宽度，会自动减少一些，包装前面写的width:100%
  // content-box: width = 内容的宽度  padding border如果写了，会在给width增加一些宽度
  // padding: 0 15px;
  box-sizing: border-box;
  // background-color: aqua;
  position: relative;
  .login-page-main {
    padding: 0 15px;
    .lp-title {
      margin-top: 25px;
      display: flex;
      justify-content: space-between;
      align-items: end;
      span:first-child {
      }
      &:first-child {
      }
      // first-child 不是子元素的第一个 自己的第一个
      span {
        &:first-child {
          font-size: 30px;
        }
        &:last-child {
          font-size: 16px;
        }
      }
    }
    .lp-form {
      margin: 15px 0;
      .van-form {
        color: red;
        .van-cell-group--inset {
          margin: 0;
        }
      }
    }
    .lp-forget {
      text-align: center;
      color: #cac9c9;
    }
    .lp-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 50px;
      div {
        font-size: 16px;
        margin-bottom: 5px;
      }
    }
  }
  .lpf-xieyi {
    margin: 0 5px;
    color: var(--cp-primary);
  }
  :deep() {
    .van-field__label {
      width: 60px !important;
    }
  }
}
// .van-form {
//   color: red;
//   .van-cell-group--inset {
//     margin: 0;
//   }
// }
// :deep() {
//   .van-form .van-cell-group--inset {
//     margin: 0;
//   }
// }
</style>
